// pages/tongji/tongji.js
import * as echarts from '../../ec-canvas/echarts';

const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    id:"",
    years: [],
    months: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
    yearsindex: 0,
    monthindex: 0,
    qudaoData:[],
    quyuData:[],
    qudao:{
      "total":0,
      "data":
        [{
          "id":1,
          "name":"百度",
          "value": 0
        }, {
            "id": 2,
            "name": "58",
          "value": 0
          }, {
            "id": 3,
            "name": "腾讯",
            "value": 0
          }, {
            "id": 4,
            "name": "回访",
            "value": 0
          }, {
            "id": 5,
            "name": "旧客",
            "value": 0
          }, {
            "id": 6,
            "name": "介绍",
            "value": 0
          }
        ]
    },
    quyu:{
      "total": 0,
      "data":
        [{
          "id": 1,
          "name": "顺德",
          "value": 0
        }, {
          "id": 2,
          "name": "广州",
          "value": 0
        }, {
          "id": 3,
          "name": "东莞",
          "value": 0
        }, {
          "id": 4,
          "name": "深圳",
          "value": 0
        }, {
          "id": 5,
          "name": "中山",
          "value": 0
        }, {
          "id": 6,
          "name": "佛山",
          "value": 0
          }, {
            "id": 7,
            "name": "惠州",
            "value": 0
          }
        ]
    },
    mianji:[
      { value: 335, name: '<500' },
      { value: 310, name: '<600' },
      { value: 274, name: '<1000' },
      { value: 235, name: '<1500' },
      { value: 400, name: '<2000' }
    ],
    leixing: {
      "total": 0,
      "data":
        [{
          "id": 1,
          "name": "顺德",
          "value": 0
        }, {
          "id": 2,
          "name": "广州",
          "value": 0
        }, {
          "id": 3,
          "name": "东莞",
          "value": 0
        }, {
          "id": 4,
          "name": "深圳",
          "value": 0
        }, {
          "id": 5,
          "name": "中山",
          "value": 0
        }, {
          "id": 6,
          "name": "佛山",
          "value": 0
        }, {
          "id": 7,
          "name": "惠州",
          "value": 0
        }
        ]
    },
    lastD: {
      "month": ["2月", "3月", "4月", "5月", "6月", "7月"],
      "data": [
        {
          "name": '邮件营销',
          "type": 'line',
          "stack": '总量',
          "data": [120, 132, 101, 134, 90, 230]
        },
        {
          "name": '联盟广告',
          "type": 'line',
          "stack": '总量',
          "data": [220, 182, 191, 234, 290, 330]
        },
        {
          "name": '视频广告',
          "type": 'line',
          "stack": '总量',
          "data": [150, 232, 201, 154, 190, 330]
        },
        {
          "name": '直接访问',
          "type": 'line',
          "stack": '总量',
          "data": [320, 332, 301, 334, 390, 330]
        },
        {
          "name": '搜索引擎',
          "type": 'line',
          "stack": '总量',
          "data": [320, 332, 301, 334, 390, 330]
        }
      ]
    },
    qd:{
      lazyLoad: true
    },
    ec: {
      lazyLoad: true
    },
    mj: {
      lazyLoad: true
    },
    lx: {
      lazyLoad: true
    },
    last: {
      lazyLoad: true
    },

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //动态年
    var myDate=new Date()
    var year = myDate.getFullYear()
    var monthN=myDate.getMonth()
    this.setData({
      monthindex: monthN,
      id: options.id
    })
    for(var i = -1 ; i< 20 ;i++){
      this.setData({
        years: this.data.years.concat(year+i)
      })
    }
    wx.setNavigationBarTitle({
      title: options.name+'数据分析',
      success: function (res) { },
      fail: function (res) { },
      complete: function (res) { },
    })
  },
  getData: function () {
    var that = this
    wx.request({
      url: app.globalData.httpurl + 'v2/baobiao',
      method: "GET",
      header: {
        "Authorization": "bearer " + app.globalData.access_token
      },
      data: {
        "year":this.data.years[this.data.yearsindex],
        "month":this.data.months[this.data.monthindex],
        "project_id": this.data.id
      },
      success: function (res) {
        console.log(res.data)
        var qdqd=res.data.data.qudao.data
        var finQdData=[]
        console.log(qdqd)
        for (var d in qdqd) {
          if (qdqd[d].name.length > 4){
            qdqd[d].name=qdqd[d].name.substring(0,4)
            finQdData.push(qdqd[d])
          }else{
            finQdData.push(qdqd[d])
          }
        }
        var qyqy = res.data.data.quyu.data
        var finQyData = []
        for (var d in qyqy) {
          if (qyqy[d].name.length > 4) {
            qyqy[d].name = qyqy[d].name.substring(0, 4)
            finQyData.push(qyqy[d])
          } else {
            finQyData.push(qyqy[d])
          }
        }
        that.setData({
          qudaoData: finQdData,
          quyuData: finQyData,
          qudao:res.data.data.qudao,
          quyu: res.data.data.quyu,
          mianji: res.data.data.mianji,
          leixing: res.data.data.leixing,
          lastD: res.data.data.lastD,
        })
        //初始化图标
        that.qdComponent.init((canvas, width, height) => {
          // 获取组件的 canvas、width、height 后的回调函数
          // 在这里初始化图表
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height
          });
          chart.setOption(that.getQdOption())
          // 注意这里一定要返回 chart 实例，否则会影响事件处理等
          return chart;
        });
        that.qyComponent.init((canvas, width, height) => {
          // 获取组件的 canvas、width、height 后的回调函数
          // 在这里初始化图表
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height
          });
          chart.setOption(that.getqyOption())
          // 注意这里一定要返回 chart 实例，否则会影响事件处理等
          return chart;
        });

        that.MjComponent.init((canvas, width, height) => {
          // 获取组件的 canvas、width、height 后的回调函数
          // 在这里初始化图表
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height
          });
          chart.setOption(that.getMjOptions())
          // 注意这里一定要返回 chart 实例，否则会影响事件处理等
          return chart;
        });

        that.LxComponent.init((canvas, width, height) => {
          // 获取组件的 canvas、width、height 后的回调函数
          // 在这里初始化图表
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height
          });
          chart.setOption(that.getLxOption())
          // 注意这里一定要返回 chart 实例，否则会影响事件处理等
          return chart;
        });

        that.LastComponent.init((canvas, width, height) => {
          // 获取组件的 canvas、width、height 后的回调函数
          // 在这里初始化图表
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height
          });
          chart.setOption(that.getLastOption())
          // 注意这里一定要返回 chart 实例，否则会影响事件处理等
          return chart;
        });
      }
    })

  },
  getQdOption :function(){
    var names=[]
    var values=[]
    for(var i=0;i<this.data.qudao.data.length;i++){
      names.push(this.data.qudao.data[i].name)
      values.push(this.data.qudao.data[i].value)
    }
   const option = {
     backgroundColor: '#4d4c4c',
      color: ['#c23531'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
     tooltip: {
       show: false,
     },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: names,
          axisTick: {
            alignWithLabel: true
          },

          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#fff',//左边线的颜色
              width: '2'//坐标线的宽度
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',//坐标值得具体的颜色
              fontSize: 6
            }
          }
        }
      ],
      yAxis: [
        {
          name:'%',
          fontSize: 16,
          type: 'value',
          min: 0,
          max: 100,
          splitLine: {
            lineStyle: {
                // 使用深浅的间隔色
                color: "#515151"
            }
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#fff',//左边线的颜色
              width: '2'//坐标线的宽度
            }
          },
          axisLabel:{
            textStyle: {
              color: '#fff',//坐标值得具体的颜色
              fontSize: 16
            }
          }
        }
      ],
      series: [
        {
          type: 'bar',
          barWidth: '50%',
          clickable: false,
          data: values,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'top',
                formatter: '{c}%',
                color: '#FFF',
                textStyle:{
                  fontSize: 10
                }
              }
            }
          }
        }
      ]
    };
    return option;
  },

  getqyOption: function () {
    var names=[]
    var values = []
    for (var i = 0; i < this.data.quyu.data.length; i++) {
      names.push(this.data.quyu.data[i].name)
      values.push(this.data.quyu.data[i].value)
    }
    const option = {
      backgroundColor: '#4d4c4c',
      color: ['#c23531'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      tooltip: {
        show: false,
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: names,
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#fff',//左边线的颜色
              width: '2'//坐标线的宽度
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',//坐标值得具体的颜色
              fontSize: 6,
            }
          }
        }
      ],
      yAxis: [
        {
          name: '%',
          fontSize: 16,
          type: 'value',
          min: 0,
          max: 100,
          splitLine: {
            lineStyle: {
                // 使用深浅的间隔色
                color: "#515151"
            }
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#fff',//左边线的颜色
              width: '2'//坐标线的宽度
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',//坐标值得具体的颜色
              fontSize: 16,
            }
          }
        }
      ],
      series: [
        {
          type: 'bar',
          barWidth: '50%',
          data: values,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'top',
                formatter: '{c}%',
                color: '#FFF',
                textStyle:{
                  fontSize: 10
                }
              }
            }
          }
        }
      ]
    };
    return option;
  },
  getMjOptions:function(){
    console.log(this.data.mianji)
    const option = {
      backgroundColor: '#4d4c4c',
      tooltip: {
        trigger: 'item',
        show: false,
      },
      visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
          colorLightness: [0, 1]
        }
      },
      series: [
        {
          type: 'pie',
          radius: '55%',

          center: ['50%', '50%'],
          data: this.data.serControllermianji.data.sort(function (a, b) { return a.value - b.value; }),
          roseType: 'radius',
          label: {
            normal: {
              textStyle: {
                color: 'rgba(255, 255, 255, 0.3)',
                fontSize: 16,
              }
            }
          },
          labelLine: {
            normal: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            }
          },
          itemStyle: {
            normal: {
              color: '#c23531',
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },

          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function (idx) {
            return Math.random() * 200;
          }
        }
      ]
    };

    return option;
  },

  getLxOption:function(){
    var names = []
    var values = []
    for (var i = 0; i < this.data.leixing.data.length; i++) {
      names.push(this.data.leixing.data[i].name)
      values.push(this.data.leixing.data[i].value)
    }
    const option = {
      backgroundColor: '#4d4c4c',
      color: ['#c23531'],
      tooltip: {
        trigger: 'axis',
        show: false,
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          name: '%',
          fontSize: 16,
          type: 'value',
          axisTick: {
            alignWithLabel: true
          },
          splitLine: {
            lineStyle: {
                color: "#515151"
            }
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#fff',//左边线的颜色
              width: '2'//坐标线的宽度
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',//坐标值得具体的颜色
              fontSize: 16,
            }
          },
          splitNumber: 10,
          min: 0,
          max: 100
        }
      ],
      yAxis: [
        {
          type: 'category',
          data: names,
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#fff',//左边线的颜色
              width: '2'//坐标线的宽度
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',//坐标值得具体的颜色
              fontSize: 10
            }
          }
        }
      ],
      series: [
        {
          type: 'bar',
          barWidth: '50%',
          data: values,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'right',
                formatter: '{c}%',
                color: '#FFF',
                textStyle:{
                  fontSize: 10,
                }
              }
            }
          }
        }
      ]
    };
    return option;
  },
  getLastOption:function(){
    var names = []
    for (var i = 0; i < this.data.lastD.data.length; i++) {
      names.push(this.data.lastD.data[i].name)
    }
    const option = {
      tooltip: {
        trigger: 'axis',
        show: false,
      },
      legend: {
        data: names,
        textStyle:{
          color: '#FFF',
          fontSize: 8
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: this.data.lastD.month,
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: '#fff',//左边线的颜色
            width: '2'//坐标线的宽度
          }
        },
        axisLabel: {
          textStyle: {
            color: '#fff',//坐标值得具体的颜色
            fontSize: 10
          }
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            // 使用深浅的间隔色
            color: "#515151"
          }
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: '#fff',//左边线的颜色
            width: '2'//坐标线的宽度
          }
        },
        axisLabel: {
          textStyle: {
            color: '#fff',//坐标值得具体的颜色
            fontSize: 10
          }
        },
        splitNumber: 5,
        min: 0,
        max: 100
      },
      series: this.data.lastD.data
    };

    return option;
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // 获取组件
    this.qdComponent = this.selectComponent('#mychart-qudao');
    this.qyComponent = this.selectComponent('#mychart-quyu');
    this.MjComponent = this.selectComponent('#mychart-mianji');
    this.LxComponent = this.selectComponent('#mychart-leixing');
    this.LastComponent = this.selectComponent('#mychart-last');
    this.getData();
  },
  bindYear:function(e){
    this.setData({
      yearsindex: e.detail.value,
      finQdData:[],
      finQyData:[]
    })
    this.getData()
  },
  bindMonth:function(e){
    this.setData({
      monthindex: e.detail.value,
      finQdData:[],
      finQyData:[]
    })
    this.getData()
  }
})

